<template>
  <div class="maininfochange">
    <div style="width:90%;margin: 0 auto;margin-top:10px;">
      <!-- 修改展示页面 -->
      <div v-if="mainmodify">
        <a-spin :spinning="spinning">
          <p style="color:#3a3a3a;">
            对以下任意内容变更，请务必上传
            <a
              class="a-sty"
              @click="getFileDownload('agent_imformation_modify')"
            >《合作机构信息变更申请表》</a>
            加盖公章的照片，我们将在1个工作日内完成审核，审核通过后变更生效。
          </p>
          <a-card class="card_sty" title="基本信息" :headStyle="headStyle">
            <a-card-grid class="tabClass_lf">客户名称</a-card-grid>
            <a-card-grid class="tabClass_rt">{{ agentInfoDTO.merchantName }}</a-card-grid>
            <a-card-grid class="tabClass_lf">客户简称</a-card-grid>
            <a-card-grid class="tabClass_rt">{{ agentInfoDTO.shortName }}</a-card-grid>
            <a-card-grid class="tabClass_lf">营业期限</a-card-grid>
            <a-card-grid class="tabClass_rt">
              {{agentInfoDTO.orgExpiryDateStart}}
              至{{agentInfoDTO.orgExpiryDateEnd}}
            </a-card-grid>
          </a-card>

          <a-modal class="modalClass" :visible="visible" @cancel="modalHandleCancel" :footer="null">
            <img class="imgClass" :src="imageSrc" alt />
          </a-modal>
          <a-card v-if="legal!=null" class="card_sty" title="法定代表人信息" :headStyle="headStyle">
            <a-card-grid class="tabClass_lf">姓名</a-card-grid>
            <a-card-grid class="tabClass_rt">{{ legal.identityName }}</a-card-grid>
            <a-card-grid class="tabClass_lf">证件类型</a-card-grid>
            <a-card-grid class="tabClass_rt">身份证</a-card-grid>
            <a-card-grid class="tabClass_lf">证件号码</a-card-grid>
            <a-card-grid class="tabClass_rt">{{legal.identityNo}}</a-card-grid>
            <a-card-grid class="tabClass_lf">证件有效期</a-card-grid>
            <a-card-grid class="tabClass_rt">{{legal.expiryDate}}</a-card-grid>
          </a-card>

          <a-card v-if="bank!=null" class="card_sty" title="结算账户信息" :headStyle="headStyle">
            <a-card-grid class="tabClass_lf">账户类型</a-card-grid>
            <a-card-grid class="tabClass_rt">
              <span v-if="bank.isPrivate==false">对公</span>
              <span v-if="bank.isPrivate==true">对私</span>
            </a-card-grid>
            <a-card-grid class="tabClass_lf">账户名称</a-card-grid>
            <a-card-grid class="tabClass_rt">{{bank.accountName}}</a-card-grid>
            <a-card-grid class="tabClass_lf">开户行名称</a-card-grid>
            <a-card-grid class="tabClass_rt">{{bank.bankName}}</a-card-grid>
            <a-card-grid class="tabClass_lf">开户行所在地</a-card-grid>
            <a-card-grid class="tabClass_rt">{{bank.province}} - {{bank.city}}</a-card-grid>
            <a-card-grid class="tabClass_lf">支行名称</a-card-grid>
            <a-card-grid class="tabClass_rt">{{ bank.bankBranchName }}</a-card-grid>
            <a-card-grid class="tabClass_lf">账号</a-card-grid>
            <a-card-grid class="tabClass_rt">{{ bank.cardNo }}</a-card-grid>
          </a-card>

          <!-- <a-card class="card_sty" title="认证视频" :headStyle='{height:"45px",display:"flex"}'>
            <a-card-grid class="tabClass_lf">法定代表人视频</a-card-grid>
            <a-card-grid class="tabClass_rt"> <a :href="'/file/file/download/' +img.video"
                download="shiping">点击下载</a></a-card-grid>

          </a-card>-->

          <div style="text-align:center;margin:20px 0;">
            <a-button
              type="primary"
              @click="mainInfoModify"
              :disabled="isAbled"
              :loading="iconLoading"
            >{{btntext}}</a-button>
          </div>
          <div>
            <a-table
              size="middle"
              :scroll="{ y: '38vh' }"
              :columns="columns"
              :dataSource="updateRecord"
              :pagination="false"
              :rowKey="record => record.ctime"
            >
              <span slot="remark" slot-scope="record">
                <span>{{record.remark ? record.remark : '无'}}</span>
              </span>
            </a-table>
          </div>
        </a-spin>
      </div>
      <div v-if="!mainmodify">
        <p style="color:#3a3a3a;">
          对以下任意内容变更，请务必上传
          <a class="a-sty" @click="getFileDownload('agent_imformation_modify')">
            <strong style="color:#1890ff">《合作机构信息变更申请表》</strong>
          </a>加盖公章的照片，我们将在1个工作日内完成审核，审核通过后变更生效。
          <br />
          <span style="color:#a4a4a4">注：以下所有上传资料均需加盖公章，格式支持图片格式JPG、PNG，且每个文件大小不超过{{imageSize}}M</span>
        </p>

        <a-form
          @submit="handleSubmit"
          style="margin-top: 8px;width:80%;margin:0 auto;"
          :form="form"
        >
          <a-row>
            <a-col :xs="{ span : 24 }" :sm="{ span:6 }" class="formGroupTitle">基本信息</a-col>
            <a-col :xs="{ span : 24 }" :sm="{ span:12 }">
              <p class="p-sty">适用于合作机构更名及更新营业执照等情况，若修改此项，请重新上传营业执照</p>
            </a-col>
          </a-row>
          <a-form-item v-bind="formItemLayout" help="若修改此项，请在“其他补充资料”中上传公司更名证明函" label="客户名称">
            <a-input
              v-decorator="[
                      'merchantName',
                      {rules: [{ required: true, message: '请输入客户名称' },{
                        
                       }],validateTrigger: 'blur'}
                    ]"
              placeholder="请输入客户名称"
              @change="merchantNameChange"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="客户简称">
            <a-input
              v-decorator="[
                      'shortName',
                      {rules: [{ required: true, message: '请输入客户简称' },{
                         
                       }],validateTrigger: 'blur'}
                    ]"
              placeholder="请输入客户简称"
            />
          </a-form-item>
          <a-form-item v-bind="formItemLayout" required label="营业期限">
            <div>
              <a-date-picker
                :disabledDate="disabledStartDate"
                showTime
                format="YYYY-MM-DD"
                :required="true"
                placeholder="请选择起始日期"
                @change="startChange"
                @openChange="handleStartOpenChange"
                v-decorator="[
                      'startDate',
                      {rules: [{ required: true, message: '请选择证件有效期' }]}
                    ]"
              />&nbsp; 至 &nbsp;
              <a-date-picker
                :disabledDate="disabledEndDate"
                showTime
                format="YYYY-MM-DD"
                placeholder="请选择截止日期"
                :open="endOpen"
                @change="endChange"
                @openChange="handleEndOpenChange"
                v-decorator="[
                      'endDate',
                      {rules: [{ required: true, message: '请选择证件有效期' }]}
                    ]"
              />
              <span @click="tolong" style="color:#1890ff;cursor: pointer;">&nbsp; 长期</span>
            </div>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="营业执照">
            <div class="clearfix" style="display:inline-block;">
              <a-upload
                v-decorator="['upload',{rules: [{ required: true, message: '请上传营业执照!' }]}]"
                name="upfile"
                :headers="henderstoken"
                action="/file/file/upload"
                listType="picture-card"
                :data="{to}"
                :fileList="fileList"
                @preview="handlePreview"
                @change="handleChange"
              >
                <div v-if="fileList.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">营业执照</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible" :footer="null" @cancel="handleCancel">
                <img alt="example" style="width: 100%" :src="previewImage" />
              </a-modal>
              <span class="span-sty">营业执照</span>
            </div>
          </a-form-item>

          <a-row>
            <a-col :xs="{ span : 24 }" :sm="{ span:6 }" class="formGroupTitle">法定代表人信息</a-col>
            <a-col :xs="{ span : 24 }" :sm="{ span:12 }">
              <p class="p-sty">适用于合作机构的法定代表人变更，或法定代表人身份证有效期修改，若修改此项，请重新上传法定代表人身份证</p>
            </a-col>
          </a-row>
          <a-form-item v-bind="formItemLayout" help="若修改此项，请重新上传营业执照" label="姓名">
            <a-input
              v-decorator="[
                      'identityName',
                      {rules: [{ required: true, message: '请输入法定代表人姓名' }]}
                    ]"
              placeholder="请输入法定代表人姓名"
              @change="identityNameChange"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="证件类型">
            <div>
              <a-select
                disabled
                class="width-sty"
                default-value="legal"
              >
                <a-select-option value="legal">身份证</a-select-option>
                <!-- <a-select-option value="lucy">护照</a-select-option>
                <a-select-option value="disabled">港澳台通行证</a-select-option>
                <a-select-option value="Yiminghe">军官证</a-select-option>
                <a-select-option value="Yiminghe">户口簿</a-select-option> -->
              </a-select>
            </div>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="证件号码">
            <a-input
              v-decorator="[
                      'identityNo',
                      {rules: [{ required: true, message: '请输入证件号码' },{
                         validator: validateIdentityNo
                       }],validateTrigger: 'blur'}
                    ]"
              placeholder="请输入证件号码"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="证件有效期">
            <a-date-picker
              placeholder="请选择证件有效期"
              @change="dateChange"
              v-decorator="[
                      'expiryDate',
                      {rules: [{ required: true, message: '请选择证件有效期' }]}
                    ]"
            />
            <span
              @click="longexpiryDate"
              style="color:#1478d5;cursor: pointer;fontSize:13px;"
            >&nbsp; 长期</span>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="法定代表人身份证">
            <div class="clearfix" style="display:inline-block;">
              <a-upload
                v-decorator="['upload5',{rules: [{ required: true, message: '请上传身份证正/反面!' }]}]"
                :data="{to}"
                name="upfile"
                :headers="henderstoken"
                action="/file/file/upload"
                listType="picture-card"
                :fileList="fileList2"
                @preview="handlePreview2"
                @change="handleChange2"
              >
                <div v-if="fileList2.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">身份证正面</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible2" :footer="null" @cancel="handleCancel2">
                <img alt="example" style="width: 100%" :src="previewImage2" />
              </a-modal>
              <span class="span-sty">人像面</span>
            </div>
            <div class="clearfix" style="display:inline-block;">
              <a-upload
                :data="{to}"
                name="upfile"
                :headers="henderstoken"
                action="/file/file/upload"
                listType="picture-card"
                :fileList="fileList3"
                @preview="handlePreview3"
                @change="handleChange3"
              >
                <div v-if="fileList3.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">身份证反面</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible3" :footer="null" @cancel="handleCancel3">
                <img alt="example" style="width: 100%" :src="previewImage3" />
              </a-modal>
              <span class="span-sty">国徽面</span>
            </div>
          </a-form-item>

          <a-row>
            <a-col :xs="{ span : 24 }" :sm="{ span:6 }" class="formGroupTitle">结算账户信息</a-col>
            <a-col :xs="{ span : 24 }" :sm="{ span:12 }">
              <p class="p-sty">若修改此项，请重新上传结算银行账户</p>
            </a-col>
          </a-row>

          <a-form-item v-bind="formItemLayout" label="账户类型">
            <a-radio-group
              v-decorator="[
                          'isPrivate',
                          {
                              rules: [{
                              required: true, message: '请选择账户类型',
                              }],initialValue:'false'
                          }
                          ]"
              @change="AccountTypeChange"
            >
              <a-radio value="false">对公</a-radio>
              <a-radio value="true">对私</a-radio>
            </a-radio-group>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="账户名称">
            <span>{{bankCard.accountName}}</span>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="开户行名称">
            <div>
              <a-select
                showSearch
                :notFoundContent="null"
                :defaultActiveFirstOption="false"
                :showArrow="false"
                :filterOption="false"
                @focus="handleFocus"
                @blur="handleBlur"
                @search="bankNameSearch"
                @change="bankNameChange"
                class="width-sty"
                v-decorator="[
                        'bankName',
                        {rules: [{ required: true, message: '请选择开户行名称' }]}
                      ]"
                placeholder="请输入银行名称进行选择"
              >
                <a-select-option v-for="d in seloptions" :key="d.value">{{d.label}}</a-select-option>
              </a-select>
            </div>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="开户行所在地" required>
            <a-cascader
              class="w-sty"
              v-model="bankaddress"
              :options="options3"
              @blur="addressBlur"
              @change="addressChange"
              placeholder="请选择开户行所在地"
            />
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="支行名称">
            <div>
              <a-select
                showSearch
                @search="handleSearch"
                labelInValue
                @change="bankBranchNameChange"
                optionFilterProp="children"
                :filterOption="filterOption"
                style="width:100%;"
                v-decorator="[
                        'bankBranchName',
                        {rules: [{ required: true, message: '请输入支行名称' }]}
                      ]"
                placeholder="请选择支行名称"
              >
                <a-select-option v-for="d in bankBranchoptions" :key="d.value">{{d.label}}</a-select-option>
              </a-select>
            </div>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="账号">
            <a-input
              @blur="findCardBin"
              v-decorator="[
                        'cardNo',
                        {rules: [{ required: true, message: '请输入账号' }]}
                      ]"
              placeholder="请输入账号"
            />
          </a-form-item>
          <a-form-item v-if="!idCardShow" v-bind="formItemLayout" label="联系人手机号">
            <span>{{contactBusMobile}}</span>
          </a-form-item>

          <a-form-item v-if="idCardShow" v-bind="formItemLayout" label="预留银行手机号">
            <div>
              <a-input
                placeholder="请输入预留银行手机号"
                v-decorator="[
                          'mobileNo',{
                           rules: [{ required: true, message: '请输入预留银行手机号!' },{validator: validateCode}],validateTrigger: 'blur'
                          }
                          ]"
              />
            </div>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" label="结算银行账户(账户证明)" v-if="!isPrivate">
            <div class="clearfix" style="display:inline-block;">
              <a-upload
                v-decorator="['upload8',{rules: [{ required: true, message: '请上传账户证明!' }]}]"
                :data="{to}"
                name="upfile"
                :headers="henderstoken"
                action="/file/file/upload"
                listType="picture-card"
                :fileList="fileList4"
                @preview="handlePreview4"
                @change="handleChange4"
              >
                <div v-if="fileList4.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">账户证明</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible4" :footer="null" @cancel="handleCancel4">
                <img alt="example" style="width: 100%" :src="previewImage4" />
              </a-modal>
              <span class="span-sty">账户证明</span>
            </div>
          </a-form-item>

          <a-form-item v-bind="formItemLayout" v-if="isPrivate" label="结算银行账户">
            <div class="clearfix" style="display:inline-block;">
              <a-upload
                v-decorator="['upload6',{rules: [{ required: true, message: '请上传银行卡正面!' }]}]"
                :data="{to}"
                name="upfile"
                :headers="henderstoken"
                action="/file/file/upload"
                listType="picture-card"
                :fileList="fileList5"
                @preview="handlePreview5"
                @change="handleChange5"
              >
                <div v-if="fileList5.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">银行卡正面</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible5" :footer="null" @cancel="handleCancel5">
                <img alt="example" style="width: 100%" :src="previewImage5" />
              </a-modal>
              <span class="span-sty">银行卡正面</span>
            </div>
             <p
                style="font-size: 12px;line-height: 30px;"
              >为了您的资金安全，请勿上传带有CVV安全码的照片</p>
          </a-form-item>

          <a-row>
            <a-col :xs="{ span : 24 }" :sm="{ span:6 }" class="formGroupTitle">上传申请表</a-col>
            <a-col :xs="{ span : 24 }" :sm="{ span:17 }">
              <p class="p-sty">
                对上述任意内容变更，请务必上传《合作机构信息变更申请表》加盖公章的图片，支持图片格式JPG、PNG，且每个文件大小不超过{{imageSize}}M
                <span
                  style="color:#1890ff;"
                >
                  <a class="a-sty" @click="getFileDownload('agent_imformation_modify')">下载模板</a>
                </span>
              </p>
            </a-col>
          </a-row>

          <a-form-item v-bind="formItemLayout" label="变更申请表">
            <div class="clearfix" style="display:inline-block;">
              <a-upload
                v-decorator="['upload4',{rules: [{ required: true, message: '请上传申请表!' }]}]"
                :data="{to}"
                name="upfile"
                :headers="henderstoken"
                action="/file/file/upload"
                listType="picture-card"
                :fileList="fileList13"
                @preview="handlePreview13"
                @change="handleChange13"
              >
                <div v-if="fileList13.length < 1">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">变更申请表</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible13" :footer="null" @cancel="handleCancel3">
                <img alt="example" style="width: 100%" :src="previewImage13" />
              </a-modal>
            </div>
          </a-form-item>
          <a-form-item v-bind="formItemLayout" label="其他材料">
            <div class="clearfix">
              <a-upload
                v-decorator="['upload12']"
                name="upfile"
                :headers="henderstoken"
                action="/file/file/upload"
                listType="picture-card"
                :fileList="fileList12"
                :data="{to}"
                @preview="handlePreview12"
                @change="handleChange12"
              >
                <div v-if="fileList12.length < 3">
                  <a-icon type="plus" />
                  <div class="ant-upload-text">其他材料</div>
                </div>
              </a-upload>
              <a-modal :visible="previewVisible12" :footer="null" @cancel="handleCancel12">
                <img alt="example" style="width: 100%" :src="previewImage12" />
              </a-modal>
            </div>
          </a-form-item>
          <a-row>
            <a-col :sm="{ span:17,offset:7 }">
              <a-button
                style="width: 6vw;"
                html-type="submit"
                type="primary"
                :loading="successLoading"
              >提交</a-button>
              <a-button style="width: 6vw;margin-left: 1vw;" type="primary" @click="gologin">取消</a-button>
            </a-col>
          </a-row>
          <div style="text-align:center;margin:20px 0;"></div>
        </a-form>
        <a-modal title="信息变更手机短信验证！" v-model="modalVisible" :footer="null">
          <a-form @submit="orgSubmit" :form="modalForm" style="margin:0 auto;">
            <a-form-item v-bind="formItemLayout1" label="手机号码">
              <span>我们已向手机号{{this.bankCardDTO.mobileNo}}发送了一条验证码，请查收后填写</span>
            </a-form-item>
            <a-form-item v-bind="formItemLayout1" label="验证码">
              <a-input
                style="width:70%;"
                v-model="query.verCode"
                name="captcha"
                placeholder="请输入验证码"
              />
            </a-form-item>
            <div style="text-align:center;">
              <a-button style="width: 5vw;" htmlType="submit" type="primary">确定</a-button>
            </div>
          </a-form>
        </a-modal>
      </div>
    </div>
  </div>
</template>

<script>
import AForm from "ant-design-vue/es/form/Form";
import ATabs from "ant-design-vue/es/tabs";

import AFormItem from "ant-design-vue/es/form/FormItem";
import AInput from "ant-design-vue/es/input/Input";
import AIcon from "ant-design-vue/es/icon";
import AInputGroup from "ant-design-vue/es/input/Group";
import AButton from "ant-design-vue/es/button/button";
import ACol from "ant-design-vue/es/grid/Col";
import ARow from "ant-design-vue/es/grid/Row";
import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
import AAlert from "ant-design-vue/es/alert/index";
const ATabPane = ATabs.TabPane;
const DetailListItem = DetailList.Item;

import DetailList from "../../../components/tool/DetailList";

import pick from "lodash.pick";
import api from "@/common/api";
import { get, post } from "@/common/api";
import moment from "moment";
import { type } from "os";
import { mapState } from "vuex";
const dateFormat = "YYYY-MM-DD";
const columns = [
  {
    title: "变更内容",
    dataIndex: "modifyContent",
    width: "25%",
    align: "center",
  },
  { title: "申请时间", dataIndex: "ctime", width: "25%", align: "center" },
  { title: "审核状态", dataIndex: "statusName", width: "25%", align: "center" },
  {
    title: "审核信息",
    scopedSlots: { customRender: "remark" },
    width: "25%",
    align: "center",
  },
];
export default {
  name: "Login",
  components: {
    AAlert,
    ACheckbox,
    ACol,
    ARow,
    AButton,
    AInputGroup,
    AIcon,
    AInput,
    AFormItem,
    ATabPane,
    ATabs,
    AForm,
    DetailListItem,
    DetailList,
  },
  data() {
    return {
      columns,
      imageSrc: "",
      btntext: "重要信息变更",
      modalVisible: false,
      visible: false,
      accountInfo: false,
      idCardShow: false,
      AccountTypeStatus: false,
      companyName: "",
      headStyle: {
        height: "45px",
        display: "flex",
      },
      to:sessionStorage.getItem("memberNo") + "_" + sessionStorage.getItem("username"),
      henderstoken: {
        Authorization: localStorage.getItem("token"),
      },
      query: {
        verCode: "",
      },
      spinning: true,
      iconLoading: false,
      successLoading: false,
      customerOrg: {},
      legal: {},
      bank: {},
      type: null,
      isAbled: true,
      img: {
        businessimg: null,
        pubaccountimg: null,
        frontcardimg: null,
        reversecardimg: null,
        fronbankcardimg: null,
        reversebancardimg: null,
        video: null,
      },
      information: { legalIdentity: {}, bankCard: {}, otherImgs: [] },
      mainmodify: true,
      endOpen: false,
      update: false,
      mer: false,
      bankCard: {},
      identityLegalDTO: {},
      cardHolderIdentityDTO: {
        imgHead: "",
        imgEmblem: "",
      },
      bankCardDTO: {},
      agentInfoDTO: {},
      updateRecord: [],
      form: this.$form.createForm(this),
      modalForm: this.$form.createForm(this),
      error: "",
      loginpwd: "",
      loginpwd2: "",
      contactBusMobile: "",
      login: false,
      isshow: false,
      bankaddress: [],
      startDate: "",
      endDate: "",
      startValue: null,
      endValue: null,
      //   重要信息修改
      isempty: true,
      isenter: true,
      previewImage: "",
      previewImage1: "",
      previewImage3: "",
      previewImage4: "",
      previewImage2: "",
      previewImage5: "",
      previewImage6: "",
      previewImage7: "",
      previewImage8: "",
      previewImage9: "",
      previewImage10: "",
      previewImage11: "",
      previewImage12: "",
      previewImage13: "",
      options: [],
      options3: [],
      seloptions: [],
      previewVisible: false,
      previewVisible1: false,
      previewVisible2: false,
      previewVisible3: false,
      previewVisible4: false,
      previewVisible5: false,
      previewVisible6: false,
      previewVisible7: false,
      previewVisible8: false,
      previewVisible9: false,
      previewVisible10: false,
      previewVisible11: false,
      previewVisible12: false,
      previewVisible13: false,
      fileList: [],
      fileList1: [],
      fileList2: [],
      fileList3: [],
      fileList4: [],
      fileList5: [],
      fileList6: [],
      fileList7: [],
      fileList8: [],
      fileList9: [],
      fileList10: [],
      fileList11: [],
      fileList12: [],
      fileList13: [],
      bankBranchoptions: [],
      login: false,
      oldmerchantName: "",
      formItemLayout1: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 19, offset: 1 },
          md: { span: 15, offset: 1 },
        },
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 14, offset: 1 },
          md: { span: 12, offset: 1 },
        },
      },
      tabShow: "1",
      isPrivate: false,
      legalPersonAccount: Boolean,
    };
  },
  watch: {},
  computed: {
    ...mapState({
      imageSize: (state) => state.imageSize,
      videoSize: (state) => state.videoSize,
    }),
  },
  filters: {
    cardNofilter(value) {
      if (value) {
        var reg = /.*(.{4})$/;
        return value.replace(reg, "**** **** **** $1");
      }
    },
    cashfilter(value) {
      return parseFloat(value / 100).toFixed(2);
      // return Number(value).toFixed(2)
    },
  },
  created() {
    this.init();
    this.getareaData();
  },
  mounted() {
    this.companyName = sessionStorage.getItem("companyName");
  },
  methods: {
    moment,
    init: function () {
      this.$axios
        .get("/agent/account/manage/information/important")
        .then((res) => {
          console.log("重要信息", res);
          if (res.data.code == "OK") {
            this.spinning = false;
            this.agentInfoDTO = res.data.data.agentInfoDTO; //基本信息
            this.legal = res.data.data.agentInfoDTO.identityLegalDTO; //法定代表人
            this.bank = res.data.data.agentInfoDTO.bankCardDTO; //银行卡账户信息
            this.updateRecord = res.data.data.updateRecord; //更新记录

            console.log("审核状态状态", res.data.data.isInitStatus);
            if (res.data.data.isInitStatus == false) {
              this.isAbled = false;
              this.btntext = "重要信息变更";
            } else {
              this.isAbled = true;
              this.btntext = "当前变更正在审核中";
            }
          } else {
            this.$message.warning(res.data.message);
            this.spinning = false;
          }
        });
    },

    mainInfoModify() {
      this.mainmodify = false;
      // if(this.agentInfoDTO.merchantType == "org"){
      //   this.AccountTypeStatus = true
      // }else{
      //   this.AccountTypeStatus = false
      // }
      var self = this;
      var thisform = this.form
      setTimeout(function () {
        self.branchBankQuery(self.bank.province, self.bank.city);
      }, 1000);

      if (this.agentInfoDTO.image != null) {
        this.fileList = [
          //营业执照
          {
            uid: Math.random(10000),
            name: "xxx.png",
            status: "done",
            url: "/file/file/download/" + this.agentInfoDTO.image,
          },
        ];
      }
      if (this.legal != null) {
        this.fileList2 = [
          //身份证正
          {
            uid: Math.random(10000),
            name: "xxx.png",
            status: "done",
            url: "/file/file/download/" + this.legal.imgHead,
          },
        ];
      }
      if (this.legal != null) {
        this.fileList3 = [
          //身份证反
          {
            uid: Math.random(10000),
            name: "xxx.png",
            status: "done",
            url: "/file/file/download/" + this.legal.imgEmblem,
          },
        ];
      }
      if (this.bank.isPrivate) {
        if (this.bank.imgCardno) {
          setTimeout(function () {
          thisform.setFieldsValue({
            upload6: self.bank.imgCardno, //银行正
          })
        }, 3000);
          this.fileList5 = [
            {
              uid: Math.random(10000),
              name: "xxx.png",
              status: "done",
              url: "/file/file/download/" + this.bank.imgCardno,
            },
          ];
        }
        
      } else {
        if (this.agentInfoDTO.publicAccount != null) {
          setTimeout(function () {
          thisform.setFieldsValue({
            upload8: self.agentInfoDTO.publicAccount, //对公账户
          })
          // console.log(self.agentInfoDTO.publicAccount)
        }, 3000);
          this.fileList4 = [
            //对公账户
            {
              uid: Math.random(10000),
              name: "xxx.png",
              status: "done",
              url: "/file/file/download/" + this.agentInfoDTO.publicAccount,
            },
          ];
        }
      }
        this.fileList12 = [];
              if (this.agentInfoDTO.otherImgs) {
                this.agentInfoDTO.otherImgs.forEach((item) => {
                  let Item = {
                    uid: Math.random(10000),
                    name: "xxx.png",
                    status: "done",
                    url: "/file/file/download/" + item,
                  };
                  this.fileList12.push(Item);
                });
              } else {
                this.information.otherImgs = [];
        }
     

      this.information.orgExpiryDateStart = this.agentInfoDTO.orgExpiryDateStart;
      this.information.orgExpiryDateEnd = this.agentInfoDTO.orgExpiryDateEnd;
      this.identityLegalDTO.createDate = this.legal.expiryDate;
      this.bankaddress = [this.bank.province, this.bank.city];
      this.options3 = [
        {
          value: this.bank.province,
          label: this.bank.province,
          children: [
            {
              value: this.bank.city,
              label: this.bank.city,
            },
          ],
        },
      ];
      
      

      this.$nextTick(() => {
        this.form.setFieldsValue({
          upload: this.agentInfoDTO.image, //营业执照
          upload5: this.legal.imgHead, //身份证正
          // upload8: this.agentInfoDTO.publicAccount, //账户证明
          // upload6: this.bank.imgCardno, //银行正

          merchantName: this.agentInfoDTO.merchantName, //客户名称
          shortName: this.agentInfoDTO.shortName, //客户简称
          startDate: moment(this.agentInfoDTO.orgExpiryDateStart), //营业起始时间
          endDate: moment(this.agentInfoDTO.orgExpiryDateEnd), //营业结束时间

          identityName: this.legal.identityName, //法定代表人姓名
          identityNo: this.legal.identityNo, //身份证
          expiryDate: moment(this.legal.expiryDate), //有效期

          isPrivate: this.bank.isPrivate + "",
          accountName: this.bank.accountName,
          bankName: this.bank.bankName,
          bankBranchName: {
            key: this.bank.bankNo,
            label: this.bank.bankBranchName,
          },
          // mobileNo: this.bank.mobileNo,
          cardNo: this.bank.cardNo,
        });

        this.handleChange1(this.agentInfoDTO.merchantType);
        // 账户信息赋值
        if (this.bank.isPrivate == false) {
          // 对公
          this.getPubData();
        } else {
          this.getPriData();
        }

        this.handleBlur()
        this.text2 = this.bankaddress
        this.addressBlur();
        // if (this.agentInfoDTO.merchantType == "org") {
        //   // 对公
        //   this.getPubData();
        // } else {
        //   if (this.bank.isPrivate == false) {
        //     // 对公
        //     this.getPubData();
        //   } else {
        //     this.getPriData();
        //   }
        // }
      });

      // this.handleBlur();
    },
    handleSubmit(e) {
      e.preventDefault();

      if (
        this.fileList.length == 0 ||
        this.fileList2.length == 0 ||
        this.fileList3.length == 0
      ) {
        this.$message.error("请将信息填写完善后在提交");
        this.successLoading = false;
        return false;
      }
      if (this.isPrivate) {
        if (this.fileList5.length == 0) {
          this.$message.error("请请上传银行卡正面");
          this.successLoading = false;
          return false;
        }
      } else {
        if (this.fileList4.length == 0) {
          this.$message.error("请请上传对公账户证明");
          this.successLoading = false;
          return false;
        }
      }

      this.form.validateFields((err, values) => {
        if (!err) {
          //处理其他图片
          this.information.otherImgs = [];
          if (values.upload12) {
            let otherImgList = values.upload12.fileList || values.upload12;
            // console.log('otherImgList', otherImgList)
            otherImgList.forEach((item) => {
              if (item.response) {
                this.information.otherImgs.push(item.response.data);
              } else if (item.url) {
                let list = item.url.split("/");
                // console.log(list, list[list.length - 1])
                this.information.otherImgs.push(list[list.length - 1]);
              } else {
                this.information.otherImgs.push(item);
              }
            });
          }
          console.log(this.information.otherImgs);
          let modifyquery = {
            merchantName: values.merchantName,
            shortName: values.shortName,
            orgExpiryDateStart: this.information.orgExpiryDateStart,
            orgExpiryDateEnd: this.information.orgExpiryDateEnd,
            publicAccount: this.information.publicAccount
              ? this.information.publicAccount
              : this.agentInfoDTO.publicAccount,
            image: this.information.image
              ? this.information.image
              : this.agentInfoDTO.image,
            modifyImg: this.information.applyModifyPic,
            otherImgs: this.information.otherImgs,
            identityLegalRequest: {
              idNo: this.legal.idNo,
              identityName: values.identityName,
              identityNo: values.identityNo,
              expiryDate: this.identityLegalDTO.createDate,
              imgHead: this.identityLegalDTO.imgHead
                ? this.identityLegalDTO.imgHead
                : this.legal.imgHead,
              imgEmblem: this.identityLegalDTO.imgEmblem
                ? this.identityLegalDTO.imgEmblem
                : this.legal.imgEmblem,
            },
            bankCardRequest: {
              isPrivate: this.isPrivate,
              accountNo: this.bank.accountNo,
              accountName:this.bankCard.accountName,
              bankName: values.bankName || this.bank.bankName,

              province: this.bankaddress[0] || this.bank.province,
              city: this.bankaddress[1] || this.bank.city,

              bankBranchName:
                values.bankBranchName.label || this.bank.bankBranchName,
              cardNo: values.cardNo || this.bank.cardNo,
              mobileNo: values.mobileNo || this.contactBusMobile,
              imgCardno: this.bankCardDTO.imgCardno ? this.bankCardDTO.imgCardno : this.bank.imgCardno,
            },
          };
          this.successLoading = true;
          console.log("upvalues: ", modifyquery);
          this.$axios
            .post("/agent/account/manage/important/update", modifyquery)
            .then(
              (res) => {
                this.successLoading = false;
                console.log("提交更改", res);
                if (res.data.code == "OK") {
                  this.mainmodify = true;
                  this.$message.success("提交成功");
                  this.init();
                  //this.$router.push("/org/accountmanage/myinfo");
                } else {
                  this.$message.warning(res.data.message);
                }
              },
              (err) => {
                this.successLoading = false;
              }
            );
        }
      });
    },
    onChange(value) {
      this.information.bankCard.bankBranchName = value.name;
      this.information.bankCard.bankNo = value.key;
    },
    reset() {},
    conexport() {},
    getareaData() {
      this.$axios.get("/agent/division/all").then((res) => {
        console.log("营业执照地址res", res);
        const result = res.data;
        if (res.data.list) {
          let list = result.list;
          let arr = [];
          let newArr = list.map((item, index, list) => {
            let test = {
              label: item.label,
              value: item.value,
              children: [],
            };
            arr.push(test);
            if (item.children) {
              let children = [];
              for (let i = 0; i < item.children.length; i++) {
                let test2 = {
                  label: item.children[i].label,
                  value: item.children[i].value,
                  children: [],
                };
                children.push(test2);

                if (item.children[i].children) {
                  let child2 = [];
                  for (let a = 0; a < item.children[i].children.length; a++) {
                    let test3 = {
                      label: item.children[i].children[a].label,
                      value: item.children[i].children[a].value,
                    };
                    child2.push(test3);
                  }
                  children[i].children = child2;
                }
              }
              arr[index]["children"] = children;
            }
            return arr;
          });
          // console.log("newArr", newArr);
          this.options = newArr[0];
        } else {
          console.log("res", res);
        }
      });
    },
    handleSearch() {},
    handleOk() {
      this.$router.push("/home");
    },
    beforeUpload(file) {},
    beforeUpload1(file) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".mp4", ".avi", ".3gp", ".mov", ".flv", ".rmvb"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error(
          "上传视频仅支持AVI、MOV、RMVB、FLV、MP4、3GP 6种格式！"
        );
        return false;
      }

      const isLt2M = file.size / 1024 / 1024 < this.videoSize;
      if (!isLt2M) {
        this.$message.error(`视频大小必须小于${this.videoSize}MB!`);
      }
      console.log(file);
      return isLt2M;
    },
    dateChange(date, dateString) {
      console.log("dateString", dateString);
      this.identityLegalDTO.createDate = dateString;
    },
    longexpiryDate() {
      this.$nextTick(() => {
        this.form.setFieldsValue({
          expiryDate: moment("9999-01-01"),
        });
      });
      this.identityLegalDTO.createDate = "9999-01-01";
    },
    gologin() {
      location.reload();
      this.mainmodify = true;
    },

    // 开始时间
    startChange(date, dateString) {
      console.log("startDate", dateString);
      this.information.orgExpiryDateStart = dateString;
    },
    //结束时间
    endChange(date, dateString) {
      console.log("endDate", dateString);
      this.information.orgExpiryDateEnd = dateString;
    },
    disabledStartDate(startValue) {
      const endValue = this.endValue;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.startValue;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
      console.log(open);
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    tolong() {
      this.$nextTick(() => {
        this.form.setFieldsValue({
          endDate: moment("9999-01-01"),
        });
      });
      this.information.orgExpiryDateEnd = "9999-01-01";
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    handleChange({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);

        return;
      }
      this.fileList = fileList;
      this.form.setFieldsValue({
        upload: this.img.businessimg,
      });
      let obj = fileList[0];
      if (obj.response) {
        console.log(obj.response.data);
        this.information.image = obj.response.data; //保存营业执照
        let data = {
          imgCardno: obj.response.data,
        };
      }
    },
    handleChange2({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);
        return;
      }
      this.fileList2 = fileList;
      let obj = fileList[0];
      this.form.setFieldsValue({
        upload5: this.img.frontcardimg,
      });
      if (obj.response) {
        console.log(obj.response.data);
        this.identityLegalDTO.imgHead = obj.response.data; //身份证正面
        let data = {
          imgCardno: obj.response.data,
        };
      }
    },
    handleChange3({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);
        return;
      }
      this.fileList3 = fileList;

      let obj = fileList[0];
      if (obj.response) {
        console.log(obj.response.data);
        this.identityLegalDTO.imgEmblem = obj.response.data; //身份证反面
        
      }
    },
    handleChange4({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);
        return;
      }
      this.fileList4 = fileList;
      this.form.setFieldsValue({
        upload8: this.img.pubaccountimg,
      });
      let obj = fileList[0];
      if (obj.response) {
        console.log(obj.response.data);
        this.information.publicAccount = obj.response.data; //对公账户
        let data = {
          accountPermitImg: obj.response.data,
        };
      }
    },
    handleChange5({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);
        return;
      }
      this.fileList5 = fileList;
      // this.form.setFieldsValue({
      //   upload6: this.img.fronbankcardimg,
      // });
      let obj = fileList[0];
      if (obj.response) {
        console.log(obj.response.data);
        this.bankCardDTO.imgCardno = obj.response.data; //银行卡正面
        let data = {
          imgCardno: obj.response.data,
        };
      }
    },
    handleChange6({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);
        return;
      }
      this.fileList6 = fileList;
      let obj = fileList[0];
      if (obj.response) {
        this.bankCardDTO.imgTrack = obj.response.data; //银行卡反面
       
      }
    },
    handleChange7({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList7 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.information.entrustRecharImg = obj.response.data;
          } else {
            this.information.entrustRecharImg = "";
          }
        }
      }
    },
    handleChange8({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList8 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.information.kinshipCertificateImg = obj.response.data;
          } else {
            this.information.kinshipCertificateImg = "";
          }
        }
      }
    },
    handleChange9({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList9 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.information.handCardImg = obj.response.data;
          } else {
            this.information.handCardImg = "";
          }
        }
      }
    },
    handleChange10({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList10 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.cardHolderIdentityDTO.imgHead = obj.response.data;
          } else {
            this.cardHolderIdentityDTO.imgHead = "";
          }
        }
      }
    },
    handleChange11({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb`);
        return;
      }
      this.fileList11 = fileList;
      let obj =
        fileList.length > 0
          ? fileList[0]
          : { response: { data: null, code: null } };
      if (obj) {
        if (obj.response) {
          if (obj.response.code == "OK") {
            console.log(obj.response.data);
            this.cardHolderIdentityDTO.imgEmblem = obj.response.data;
          } else {
            this.cardHolderIdentityDTO.imgEmblem = "";
          }
        }
      }
    },
    handleChange12({ file, fileList }) {
      // let pos = file.name.lastIndexOf(".");
      // let lastName = file.name.substring(pos, file.name.length);
      // let supportTypes = [".jpeg", ".png", ".jpg", ".pdf"]; // jpeg、 png
      // if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
      //   this.$message.error("上传图片仅支持 jpeg、 png、pdf 3种格式！");
      //   return;
      // }
      if (file.size / (1024 * 1024) > 50) {
        this.$message.error(`上传图片大小应小于50Mb！`);
        return;
      }
      this.fileList12 = fileList;
      // this.information.otherImgs = []
      // let obj = fileList.length > 0 ? fileList[0] : { response: { data: null, code: null } };
      // if (obj) {
      //   // console.log(obj.response.data);
      //   this.information.otherImgs.push(obj.response.data);
      // }
    },
    handleChange13({ file, fileList }) {
      let pos = file.name.lastIndexOf(".");
      let lastName = file.name.substring(pos, file.name.length);
      let supportTypes = [".jpeg", ".png", ".jpg"]; // jpeg、 png
      if (supportTypes.indexOf(lastName.toLowerCase()) <= -1) {
        this.$message.error("上传图片仅支持 jpeg、 png 2种格式！");
        return;
      }
      if (file.size / (1024 * 1024) > this.imageSize) {
        this.$message.error(`上传图片大小应小于${this.imageSize}Mb！`);
        return;
      }
      this.fileList13 = fileList;
      this.form.setFieldsValue({
        upload4: this.img.pubaccountimg,
      });
      let obj = fileList[0];
      if (obj.response) {
        console.log(obj.response.data);
        this.information.applyModifyPic = obj.response.data; //变更申请表
      }
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },

    addressChange(value, selectedOptions) {
      console.log("addressChange", value);
      this.text2 = value;
      this.bankaddress = value;
      // this.text2 = selectedOptions.map(o => o.label);
      console.log("this.text2", this.text2);
      // if (selectedOptions.length == 1) {
      //   this.bankCard.province = {
      //     label: selectedOptions[0].label,
      //     value: selectedOptions[0].value
      //   };
      // } else if (selectedOptions.length == 2) {
      //   this.bankCard.city = {
      //     label: selectedOptions[1].label,
      //     value: selectedOptions[1].value
      //   };
      // } else if (selectedOptions.length == 3) {
      //   this.bankCard.district = {
      //     label: selectedOptions[2].label,
      //     value: selectedOptions[2].value
      //   };
      // }else {
      //   console.log(selectedOptions);
      // }

      this.bankCard.province = this.text2[0];
      this.bankCard.city = this.text2[1];
      // this.bankCard.district = this.text2[2];
    },
    onbusiChange(value, selectedOptions) {
      console.log("changevalue", typeof value, value);
      this.busitext = value;
      // this.busitext = selectedOptions.map(o => o.label);
      console.log("selectedOptions", selectedOptions);
      if (selectedOptions.length == 1) {
      } else if (selectedOptions.length == 2) {
      } else if (selectedOptions.length == 3) {
        (this.information.busiCityName = selectedOptions[1].label),
          (this.information.busiCity = selectedOptions[1].value);
        (this.information.busiProvinceName = selectedOptions[0].label),
          (this.information.busiProvince = selectedOptions[0].value);
        (this.information.busiDistrictName = selectedOptions[2].label),
          (this.information.busiDistrict = selectedOptions[2].value);
      } else {
        console.log(selectedOptions);
      }
      console.log("this.busitext", this.busitext);
      // this.busiProvince = this.busitext[0];
      // this.busiCityItem = this.busitext[1];
      // this.busiDistrictItem = this.busitext[2];
    },

    handlePreview(file) {
      console.log("file", file);
      this.previewImage = file.url || file.thumbUrl;
      this.previewVisible = true;
    },
    handlePreview1(file) {
      console.log("file", file);
      this.previewImage1 = file.url || file.thumbUrl;
      this.previewVisible1 = true;
    },
    handlePreview2(file) {
      this.previewImage2 = file.url || file.thumbUrl;
      this.previewVisible2 = true;
    },
    handlePreview3(file) {
      this.previewImage3 = file.url || file.thumbUrl;
      this.previewVisible3 = true;
    },
    handlePreview4(file) {
      this.previewImage4 = file.url || file.thumbUrl;
      this.previewVisible4 = true;
    },
    handlePreview5(file) {
      this.previewImage5 = file.url || file.thumbUrl;
      this.previewVisible5 = true;
    },
    handlePreview6(file) {
      this.previewImage6 = file.url || file.thumbUrl;
      this.previewVisible6 = true;
    },
    handlePreview7(file) {
      this.previewImage7 = file.url || file.thumbUrl;
      this.previewVisible7 = true;
    },
    handlePreview8(file) {
      this.previewImage8 = file.url || file.thumbUrl;
      this.previewVisible8 = true;
    },
    handlePreview9(file) {
      this.previewImage9 = file.url || file.thumbUrl;
      this.previewVisible9 = true;
    },
    handlePreview10(file) {
      this.previewImage10 = file.url || file.thumbUrl;
      this.previewVisible10 = true;
    },
    handlePreview11(file) {
      this.previewImage11 = file.url || file.thumbUrl;
      this.previewVisible11 = true;
    },
    handlePreview12(file) {
      this.previewImage12 = file.url || file.thumbUrl;
      this.previewVisible12 = true;
    },
    handlePreview13(file) {
      this.previewImage13 = file.url || file.thumbUrl;
      this.previewVisible13 = true;
    },
    modalHandleCancel(e) {
      this.visible = false;
    },
    handleCancel() {
      this.previewVisible = false;
    },
    handleCancel2() {
      this.previewVisible2 = false;
    },
    handleCancel3() {
      this.previewVisible3 = false;
    },
    handleCancel4() {
      this.previewVisible4 = false;
    },
    handleCancel5() {
      this.previewVisible5 = false;
    },
    handleCancel6() {
      this.previewVisible6 = false;
    },
    handleCancel7() {
      this.previewVisible7 = false;
    },
    handleCancel8() {
      this.previewVisible8 = false;
    },
    handleCancel9() {
      this.previewVisible9 = false;
    },
    handleCancel10() {
      this.previewVisible10 = false;
    },
    handleCancel11() {
      this.previewVisible11 = false;
    },
    handleCancel12() {
      this.previewVisible11 = false;
    },
    handleCancel13() {
      this.previewVisible11 = false;
    },
    identityNameChange(e) {
      // let customerType = this.form.getFieldValue("customerType");
      // if (customerType == "mer") {
      //   this.form.setFieldsValue({
      //     accountName: e.target.value,
      //   });
      //   this.isempty = false;
      // }
      if(this.isPrivate == true){
        this.bankCard.accountName = e.target.value;
      }
    },
    merchantNameChange(e) {
      if(this.isPrivate == false){
        this.bankCard.accountName = e.target.value;
      }
    },
    // 开户地址失去焦点
    addressBlur() {
      let selvalue = this.form.getFieldValue("bankName");
      // console.log("开户行地址：", this.text2);
      if (this.text2) {
        let data = {
          bankCode: selvalue,
          province: this.text2[0],
          city: this.text2[1],
          bankName: "",
        };
        api.getBankBranch(
          data,
          (res) => {
            // console.log("res", res);
            if (res.code == "OK") {
              this.bankBranchoptions = res.list;
            } else {
              // console.log(res);
            }
          },
          (err) => {
            console.log(err);
          }
        );
      } else {
        console.log("开户行地址为空");
      }
    },
    // 支行名称回显
    branchBankQuery(province, city) {
      console.log("111111111111111111111111111111");
      let selvalue = this.form.getFieldValue("bankName");
      // console.log("开户行地址：", this.text2);
      if (province && city) {
        let data = {
          bankCode: selvalue,
          province: province,
          city: city,
          bankName: "",
        };
        api.getBankBranch(
          data,
          (res) => {
            console.log("res", res);
            if (res.code == "OK") {
              this.bankBranchoptions = res.list;
            } else {
              // console.log(res);
            }
          },
          (err) => {
            console.log(err);
          }
        );
      } else {
        console.log("开户行地址为空");
      }
    },
    // 开户名称搜索
    bankNameSearch(value) {
      console.log(value);
      let data = {
        bankSuper: value,
      };
      api.getBankName(data, (res) => {
        console.log("res", res);
        if (res.code == "OK") {
          this.seloptions = [];
          console.log("res.data", typeof res.list, res.list);
          res.list.forEach((r) => {
            this.seloptions.push({
              value: r.value,
              label: r.label,
            });
          });
          console.log(this.seloptions);
        } else {
          console.log("res", res);
        }
      });
      console.log(this.seloptions);
    },
    bankNameChange(value) {
      console.log(value);
      this.form.setFieldsValue({
        bankName: value,
      });
      let data = {
        bankSuper: value,
      };
      api.getBankName(data, (res) => {
        console.log("res", res);
        if (res.code == "OK") {
          this.seloptions = [];
          console.log("res.data", typeof res.list, res.list);
          res.list.forEach((r) => {
            this.seloptions.push({
              value: r.value,
              label: r.label,
            });
          });
          this.bankaddress = "";
          console.log(this.seloptions);
        } else {
          console.log("res", res);
        }
      });
    },
    handleFocus() {
      console.log("focus");
    },
    handleBlur() {
      console.log("开户行:", selvalue);
      let selvalue = this.form.getFieldValue("bankName") || this.bank.bankName;
      if (selvalue) {
        let data = {
          bankCode: selvalue,
        };
        api.getBankArea(
          data,
          (res) => {
            console.log("res", res);
            if (res.code == "OK") {
              this.options3 = res.list;
            } else {
              console.log(res);
            }
          },
          (err) => {
            console.log(err);
          }
        );
      } else {
        // console.log("开户行为空", selvalue);
      }
    },
    handleChange1(value) {
      if (value == "mer") {
        this.mer = true;
        // this.idCardShow = true;
        // this.AccountTypeStatus = false;
      } else {
        this.mer = false;
        // this.idCardShow = false;
        // this.AccountTypeStatus = true;
        // this.form.setFieldsValue({
        //   isPrivate: "false"
        // });
      }
    },
    //卡号
    findCardBin() {
      if (!this.mer) {
        return;
      }
      let selvalue = this.form.getFieldValue("cardNo");
      console.log(selvalue);
      let isnum = /^\d+$/.test(selvalue);
      if (!isnum) {
        console.log("cg");
        return false;
      }
      this.$axios.get("/agent/card/bin/search/" + selvalue).then(
        (res) => {
          console.log("res", res);
          if (res.data.code == "OK") {
            this.cardType = res.data.data.cardtype;
          } else if (res.data.code == "NEED_LOGIN") {
          } else {
            // this.$message.warning("卡号有误！");
          }
        },
        (err) => {
          console.log(res);
        }
      );
    },
    validateOrgRegisterNo(rule, value, callback) {
      const form = this.form;
      let len = value.length;
      if (value && len != 18 && len != 15) {
        console.log("值存在");
        callback("您输入的社会统一信用代码有误！");
      } else {
        console.log("社会统一信用代码", value);
        this.payPassword = value;
      }
      callback();
    },
    validateIdentityNo(rule, value, callback) {
      const form = this.form;
      if (value && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback("您输入的身份证号码格式有误！");
      } else {
        console.log("身份证号码！", value);
      }
      callback();
    },
    imgClick(e) {
      // console.log(e.target.currentSrc)
      this.imageSrc = e.target.currentSrc;
      this.visible = true;
    },
    onChange2(e) {
      // console.log("radio checked", e.target.value);
      if (e.target.value == "true") {
        this.bankCardDTO.isPrivate = true;
      } else {
        this.bankCardDTO.isPrivate = false;
      }
    },
    validateCode(rule, value, callback) {
      if (value && !/^1(3|4|5|6|7|8|9)\d{9}$/.test(value)) {
        this.phone = false;
        callback("您输入的手机号格式有误！");
        return;
      } else {
        if (!value) {
          this.phone = false;
        } else {
          this.phone = true;
          this.phonevalue = value;
        }
        callback();
      }
    },
    validateIdentityNo2(rule, value, callback) {
      const form = this.form;
      if (value && !/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
        callback("您输入的身份证号码格式有误！");
      } else {
      }
      callback();
    },
    goModify() {
      let data = {
        mobileNo: this.bankCardDTO.mobileNo,
      };
      this.$axios
        .post("/agent/merchant/account/send/mobile/check", data)
        .then((res) => {
          console.log("sendmobile", res);
          if (res.data.code == "OK") {
            this.modalVisible = true;
          } else {
            this.$message.warning(res.data.message);
          }
        });
    },
    orgSubmit(e) {
      e.preventDefault();
      this.modalForm.validateFields((err, values) => {
        if (!err) {
          let data = {
            mobileNo: this.bankCardDTO.mobileNo,
            verCode: this.query.verCode,
          };
          this.$axios
            .post("/agent/merchant/account/submit/checkCode", data)
            .then((res) => {
              console.log("sendmobile", res);
              if (res.data.code == "OK") {
                this.accountInfo = true;
                this.modalVisible = false;
                this.getAccountInfo();
              } else {
                this.$message.warning(res.data.message);
              }
            });
        }
      });
    },
    // 账户信息赋值
    getAccountInfo() {
      this.$nextTick(() => {
        this.form.setFieldsValue({
          //{}} -{{customerOrg.}} -{{customerOrg.}
          upload6: this.bankCardDTO.imgCardno, //银行正
          upload8: this.information.publicAccount, //账户证明
          accountName: this.bankCardDTO.accountName, //账户名称
          bankName: this.bankCardDTO.bankName, //开户行名称
          bankaddress: [this.bankCardDTO.province, this.bankCardDTO.city], //开户行所在地
          bankBranchName: {
            value: this.bankCardDTO.bankNo,
            label: this.bankCardDTO.bankBranchName,
          }, //支行名称
          cardNo: this.bankCardDTO.cardNo, //账户
          // isPrivate: "" + this.bankCardDTO.isPrivate,//账户类型
        });
      });
      if (this.bankCardDTO.isPrivate == false) {
        this.fileList4 = [
          //账户证明
          {
            uid: "4",
            name: "xxx.png",
            status: "done",
            url: "/file/file/download/" + this.information.publicAccount,
          },
        ];
      } else {
        this.fileList5 = [
          //银行卡正
          {
            uid: "7",
            name: "xxx.png",
            status: "done",
            url: "/file/file/download/" + this.bankCardDTO.imgCardno,
          },
        ];
      }
      if (!this.bankCardDTO.isPrivate) {
        this.getPubData();
        this.tabShow = "1";
      } else {
        if (this.information.legalPersonAccount) {
          this.getPriData();
          this.tabShow = "2";
        } else {
          this.getPriNotLegalData();
          this.tabShow = "3";
        }
      }
    },
    callback(key) {
      console.log(key);
      this.tabShow = key;
      if (key == "1") {
        this.getPubData();
      } else {
        this.isPrivate = true;
        if (key == "2") {
          console.log("2", key);
          this.getPriData();
        } else {
          this.getPriNotLegalData();
        }
      }
    },
    bankBranchNameChange(value) {
      console.log("value", value);
      this.bankCard.bankNo = value.key;
      this.bankCard.bankBranchName = value.label;
    },
    //对公赋值
    getPubData() {
      this.idCardShow = false;
      // let mobile = this.form.getFieldValue('mobileNo')
      if (this.bank.mobileNo) {
        this.contactBusMobile = this.bank.mobileNo;
      }
      let merchantName = this.form.getFieldValue("merchantName");
      if (merchantName) {
        this.bankCard.accountName = merchantName;
      } else {
        this.$message.warning("请填写客户名称！");
      }
      this.isPrivate = false;
      this.bankCard.accountName = this.form.getFieldValue("merchantName")
        ? this.form.getFieldValue("merchantName")
        : this.modify.merchantPosp.merchantName;
    },
    //对私赋值
    getPriData() {
      this.isPrivate = true;
      console.log(this.bank.mobileNo);
      this.$nextTick(() => {
        this.form.setFieldsValue({
          mobileNo: this.bank.mobileNo,
        });
      });
      // if (this.mer) {
      let identityName = this.form.getFieldValue("identityName");
      if (identityName) {
        this.bankCard.accountName = identityName;
      } else {
        this.$message.warning("请输入法人姓名！");
      }
      let identityNo = this.form.getFieldValue("identityNo");
      if (identityNo) {
      } else {
        this.$message.warning("请输入法人身份证号！");
      }
      // }
      this.idCardShow = true;
    },
    AccountTypeChange(e) {
      console.log("value", e.target.value);
      if (e.target.value == "true") {
        this.getPriData();
      } else {
        this.getPubData();
      }
    },
    getPriNotLegalData() {
      this.isPrivate = true;
      this.legalPersonAccount = false;
      if (this.bankCardDTO.accountName && this.bankCardDTO.mobileNo) {
        this.$nextTick(() => {
          this.form.setFieldsValue({
            accountName: this.bankCardDTO.accountName,
            mobileNo: this.bankCardDTO.mobileNo,
          });
        });
      }
    },
    getFileDownload(value) {
      let data = value;
      api.getFilePath(
        data,
        (res) => {
          console.log(res);
          if (res.code == "OK") {
            const a = document.createElement("a");
            if (value == "agent_imformation_modify") {
              a.download = `合作机构信息变更申请表.doc`;
            }
            let downloadUrl = "/file/file/download/" + res.data;
            a.href = downloadUrl;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
          }
        },
        (err) => {
          console.log(err);
        }
      );
    },
    //以上
  },
};
</script>

<style lang="less" scoped>
span {
  cursor: pointer;
}

img {
  cursor: pointer;
}

.maininfochange {
  overflow: scroll;
  height: 100%;
  padding: 30px;
  overflow-x: hidden;
  overflow-y: auto;
}

.imgClass {
  vertical-align: middle;
  border-style: none;
  width: 100%;
}

.modalClass {
  overflow: hidden;
}

.ant-input {
  width: 50%;
}

.formGroupTitle {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: right;
}

// .formGroupTitle {
//   font-size: 20px;
//   font-weight: bold;

// }
.ant-tabs-nav {
  float: right;
}

.content4 {
  display: flex;
  margin-bottom: 20px;

  .conleft {
    font-size: 16px;
    font-weight: 600;
    width: 180px;
  }

  .conright {
    padding: 0 20px;

    span {
      margin-right: 20px;
    }
  }
}

.row-sty {
  margin-bottom: 20px;
}

.width-sty {
  width: 50%;
}

.w-sty {
  width: 60%;
}

.span-sty {
  display: block;
  text-align: center;
  padding-right: 8px;
  color: #999;
}

.p-sty {
  color: #999;
  padding-left: 30px;
  line-height: 30px;
}

.ant-card-head-title {
  padding: 12px 0 !important;
}

.ant-card-grid {
  padding: 12px;
}

.ant-card-head {
  background: transparent;
  border-bottom: 1px solid #e8e8e8;
  padding: 0 24px;
  border-radius: 2px 2px 0 0;
  zoom: 1;
  margin-bottom: -1px;
  min-height: 45px !important;
  font-size: 16px;
  color: #52506b;
  font-weight: 400;
  display: flex;
}

.ant-card .ant-card-grid:nth-child(4n + 1),
.ant-card .ant-card-grid:nth-child(4n + 2) {
  background: #f7f9fc;
}

.ant-card-grid:hover {
  /* box-shadow: none; */
  box-shadow: 1px 0 0 0 #e8e8e8, 0 1px 0 0 #e8e8e8, 1px 1px 0 0 #e8e8e8,
    1px 0 0 0 #e8e8e8 inset, 0 1px 0 0 #e8e8e8 inset;
}

.card_sty {
  margin-bottom: 30px;
}

.ant-form-item {
  margin-bottom: 15px;
}

.tabClass_lf {
  width: 25%;
  text-align: left;
  padding-left: 20px;
}

.tabClass_rt {
  width: 75%;
  text-align: left;
  padding-left: 20px;
}

/deep/.ant-tabs-nav-scroll {
  text-align: center;
}
</style>